<template>
  <div class="about">
    <h1 :id="about1" :class="titleClass" @click="alertA()">{{num.split(' ')}}</h1>
    <input :value="text" :id="oninputid" @input="onInput" placeholder="type here">
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>

    <div>Checked names: {{ checkedName  }}</div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedName">
    <label for="jack">Jack</label>
    <input type="checkbox" id="jack1" value="Jack1" v-model="checkedName">
    <label for="jack1">Jack1</label>
    <input type="checkbox" id="jack2" value="Jack2" v-model="checkedName">
    <label for="jack2">Jack2</label>
    <p>{{text}} {{inputidshouw}}</p>

    <select v-model="selected">
      <option v-for="option in options" :key="option.text" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <div>Selected: {{ selected }}</div>

    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>

    <input type="radio" name="liandong" id="one" value="true" @click="checkRadio" />
    <label for="one">One</label>

    <input type="radio" name="liandong" id="two" value="false" @click="checkRadio"/>
    <label for="two">Two</label>
    <Element msg="hellomsg"/>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import Element from '@/components/ElementUi.vue'
export default defineComponent({
  name: 'about_view',
  methods: {
    alertA () {
      alert(this.num)
    },
    onInput (e) {
      this.text = e.target.value
      this.inputidshouw = e.currentTarget.id
    },
    checkRadio (e) {
      if (e.target.value === 'true') {
        this.awesome = true
      } else {
        this.awesome = false
      }
    }
  },
  props: {

  },
  components: {
    Element
  },
  setup () {
    const num = ref('he my world')
    const text = ref('')
    const inputid = ref('1234')
    const inputidshouw = ref('')
    const checkedName = ref([])
    const selected = ref()
    const awesome = ref('')
    const options = ref([{ text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' }])
    return { num, titleClass: 'title', text, inputid, inputidshouw, checkedName, options, selected, awesome }
  },
  watch: {
    awesome (newvue, oldvue) {
      console.log(`new awesome  newValue: ${newvue} ,oldValue:${oldvue}`)
    }
  }
})
</script>
<style scoped>
.title{
  color: red;
}
</style>
